<template>
	<navbar title="视频"></navbar>
	<view class="content" :style="{ minHeight: tools.clientHeight() }">
		<!-- <view class="index-commoned" v-if="info.list.length">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
				:circular="true">
				<swiper-item v-for="(item,key) in 1" :key="key">
					<view style="position: relative;height: 399rpx;">
						<image src="../../static/image/banner.jpg" mode="widthFix"
							class="swiper-image" @click="bannerJump(item)"></image>
						<view class="image_bottom">
							2023年“全民健身，魅力中原”河南省网络门球...
						</view>
						<view class="swiper_button">
							<image src="../../static/icon/zhibo.png" class="image_zhibo"></image>
							<view>直播中</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="navmenu">
			<view class="content2">
				<view class="item" v-for="(item, index) in info.tabsList" :key="index"
					:class="{ active : index == info.navMenuIndex }" @click="navMenuClick(item,index)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view>
			<view class="video_s"  v-for="(item, index) in info.videoList" :key="index" @click="toVideo(item.id)">
				<image :src="item.banner" mode="aspectFill"></image>
				<view class="video_sT">{{item.title}}</view>
				<image src="../../static/icon/statr.png" class="video_s_image"></image>
			</view>
		</view>
		
		<picture v-if="!info.list.length||!info.videoList.length" :title="info.is_show ? '暂无视频，去别处看看吧~':'开发中~'" imgPath="/static/image/quesheng.png"
			imgHeight="192rpx" imgWidth="335rpx" bg="#F4F4F8" :height="tools.clientTopHight(250)"></picture>
	</view>
	<tabbar :current="2"></tabbar>
</template>

<script setup lang="ts">
	import tabbar from '@/common/tabbar/index.vue'
	import { reactive } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	import { getClassify,videoList } from '@/service/api/index'
	let info = reactive({
		list: [{}, {}],
		page: 1,
		navMenuIndex: '0',
		tabsList: [
			"全部", "赛事视频", "赛事趣事", "生活日常"
		],
		videoList:[],
		class_id:"",
		is_show:0,
		
	})

	// 点击 nav
	const navMenuClick = (item:any,index : any) => {
		info.navMenuIndex = index;
		info.class_id=item.id
		info.page=1
		info.videoList=[]
		getNewsListApi()
	}
	// 视频列表
	const getNewsListApi = async () => {
		const { msg } = await videoList({ page: info.page,class_id:info.class_id })
		if (!msg.data.length && info.page != 1) {
		  return tools.showToast('暂无更多数据'), info.page--
		}
		info.videoList = [...info.videoList, ...msg.data]
		info.is_show = msg.show;
		uni.hideLoading()
	}
	// toVideo
	const toVideo = (index: number) => {
	  tools.navTo('/pagesA/match/viedoMatch?id='+index)
	}
	// 新闻资讯列表
	const getClassifyApi = async () => {
		console.log("--------------------------------");
		const { msg } = await getClassify()
		info.tabsList = msg
	}
	
	onReachBottom(() => {
		info.page++
		// 新闻资讯列表
		getNewsListApi()
	})

	onLoad(() => {
		uni.showLoading({
			title:"数据加载中"
		})
		// 新闻资讯列表
		getNewsListApi()
		getClassifyApi()
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #F4F4F8;
	}

	.content {
		background-color: #F4F4F8;
		padding: 20rpx 24rpx;

	}

	.index-commoned {
		.swiper {
			width: 710rpx;
			height: 399rpx;
			margin: auto;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.swiper-image {
			display: block;
			width: 100%;
			height: 399rpx;
			border-radius: 10rpx;
		}

		.swiper_button {
			width: 128rpx;
			height: 44rpx;
			background: #F24C55;
			border-radius: 24rpx;
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 24rpx;
			color: #FFFFFF;
			padding: 10rpx 12rpx;

			.image_zhibo {
				width: 21rpx;
				height: 21rpx;
				margin-right: 10rpx;
			}
		}

		.image_bottom {
			position: absolute;
			bottom: 0rpx;
			width: 710rpx;
			height: 48rpx;
			background: rgba(51, 51, 51, 0.39);
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			padding: 0 24rpx;
			white-space: nowrap; // 强制一行显示
			overflow: hidden; // 超出隐藏
			text-overflow: ellipsis; // 省略号
			color: #FFFFFF;
			z-index: 99999999 !important;
		}

		.image_text {
			color: #FFFFFF;
			opacity: 1;
		}

	}

	.navmenu {
		height: 100rpx;
		line-height: 99rpx;
		font-size: 30rpx;
		width: 100%;
		color: #777;
		background-color: #F4F4F8;
		// border-bottom: 1px solid #eee;
		opacity: 1;
		overflow-y: hidden;
		overflow-x: auto;

		.content2 {
			display: flex;

			text-align: center;

			.item {
				height: 99rpx;
				// width: 120rpx;
				white-space: nowrap;
				margin-left: 80rpx;
			}

			.item:first-child {
				margin-left: 20rpx;
			}
		}
	}

	.active {
		color: #354678;
		font-weight: bold;
		border-bottom: 3px solid #354678;
	}

	.video_s {
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		position: relative;
		.video_s_image{
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			left: 50rpx;
		}
		.video_sT {
			width: 508rpx;
			height: 90rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 50rpx;
			color: #000000;
			word-wrap:break-word;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
		}

		image {
			margin-right: 20rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}
	.quesheng{
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>